<template>
	<!-- 店员业绩 -->
	<view class="clerkPerformance-main">
		<!-- 管理卡片 -->
		<view class="management-card">
			<view class="management-card-content">
				<view class="card-header">
					<view class="card-header-name">本店店员共有</view>
					<view class="card-header-num">
						<text class="num">999</text>
						位
					</view>
				</view>
				<view class="card-midden">
					<view class="card-item">
						<text>已邀店主：</text>
						0位
					</view>
					<view class="card-item">
						<text>已邀创客：</text>
						0位
					</view>
					<view class="card-item">
						<text>已邀会员：</text>
						0位
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索 -->
		<view class="searchPage-input">
			<uni-search-bar
				radius="50"
				:value="searchValue"
				style="flex: 1"
				placeholder="请输入手机号进行搜索"
				clearButton="always"
				cancelButton="none"
				@confirm="search"
				@cancel="cancel"
			/>
			<text class="searchPage-title" @click="gotoShop">搜索</text>
		</view>

		<!-- 店员数据 -->
		<view class="ownerList">
			<view class="clerkItem" v-for="item in 7" :key="item">
				<view class="clerkInfo">
					<view class="clerkImage">
						<image src="" class="images" mode="widthFix"></image>
					</view>
					<view class="clerkName">测试店员</view>
				</view>
				<view class="clerkDataList">
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>直享店主</text>
							<uni-icons type="right" size="14" color="#999" class="icons"></uni-icons>
						</view>
						<view class="itemNum">0</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>间享店主</text>
							<uni-icons type="right" size="14" color="#999" class="icons"></uni-icons>
						</view>
						<view class="itemNum">0</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>联动店主</text>
							<uni-icons type="right" size="14" color="#999" class="icons"></uni-icons>
						</view>
						<view class="itemNum">0</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>直享创客</text>
							<uni-icons type="right" size="14" color="#999" class="icons"></uni-icons>
						</view>
						<view class="itemNum">0</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>间享创客</text>
							<uni-icons type="right" size="14" color="#999" class="icons"></uni-icons>
						</view>
						<view class="itemNum">0</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>联动创客</text>
							<uni-icons type="right" size="14" color="#999" class="icons"></uni-icons>
						</view>
						<view class="itemNum">0</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>普通会员</text>
							<uni-icons type="right" size="14" color="#999" class="icons"></uni-icons>
						</view>
						<view class="itemNum">0</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>订单总数</text>
						</view>
						<view class="itemNum">999</view>
					</view>
					<view class="clerkDataList-item">
						<view class="itemName">
							<text>订单总额</text>
						</view>
						<view class="itemNum">￥9999.99</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			items: ['全部店主', '直享店主', '间享店主', '联动店主'],
			searchValue: ''
		};
	},
	methods: {}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.clerkPerformance-main {
	.management-card {
		box-sizing: border-box;
		padding: 20rpx;
		.management-card-content {
			background-color: #2979ff;
			border-radius: 24rpx;
			color: #fff;
			.card-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: bold;
				box-sizing: border-box;
				padding: 40rpx 30rpx;
				.card-header-num {
					.num {
						font-size: 36rpx;
						font-weight: bold;
						margin-right: 8rpx;
					}
				}
			}
			.card-midden {
				font-size: 28rpx;
				border-bottom: 1px #f3f3f3 solid;
				box-sizing: border-box;
				padding: 30rpx;
				padding-top: 0px;
				.card-item {
					height: 60rpx;
					line-height: 60rpx;
				}
			}

			.card-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 30rpx;
				font-size: 28rpx;
				.cardNumItem {
					.cardNumItem-name {
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}

	.searchPage-input {
		display: flex;
		align-items: center;
		height: 80rpx;
		.searchPage-title {
			margin-right: 20rpx;
			color: #444;
		}
	}

	.ownerList {
		box-sizing: border-box;
		padding: 30rpx;
		height: calc(100vh - 400px);
		.clerkItem {
			margin-bottom: 40rpx;
			.clerkInfo {
				display: flex;
				.clerkImage {
					width: 140rpx;
					.images {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}

				.clerkName {
					font-size: 30rpx;
					font-weight: bold;
					height: 66rpx;
					line-height: 66rpx;
					color: #444;
				}
			}

			.clerkDataList {
				display: flex;
				flex-wrap: wrap;
				background-color: #f1f8ffb0;
				margin-top: -60rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
				padding: 70rpx 30rpx 30rpx 30rpx;
				.clerkDataList-item {
					width: 33%;
					font-size: 28rpx;
					margin-bottom: 30rpx;
					.itemName {
						display: flex;
						align-items: center;
						height: 50rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #999;
						.icons{
							margin-left: 6rpx;
						}
					}
					.itemNum {
						margin-top: 10rpx;
						font-weight: bold;
						font-size: 26rpx;
					}
				}
			}
		}
	}
}
</style>
